<style>
    .panel-statistics h4 {
        color: #666;
        font-weight: bold;
        font-size: 14px;
    }

    .panel-statistics h3 {
        font-weight: 500;
        font-size: 12px;
        color: #333;
    }
    .panel-statistics h3 span {
        font-size: 30px;
    }

    .panel-statistics em {
        font-style: normal;
    }

    .panel-statistics .pull-right {
        padding-right: 10px;
    }

    .panel-statistics .table thead tr th {
        font-weight: normal;
    }

    .panel-statistics .table tbody tr td {
        font-weight: normal;
        vertical-align: middle;
    }

    .panel-statistics .table tbody tr td p {
        margin: 0;
    }

    #echarts1 textarea {
        display: block;
    }

    select.model_id {
        min-width: 60px;
    }
    .fa-8x{
        font-size: 8em;
    }

    .nav > li > a {
        padding: 5px 5px 0px 5px;
    }
    .panel-intro > .panel-heading .nav-tabs > li > a {
        margin-right: 0;
        color: #0d0d0d;
    }
    .fixed-table-toolbar{
        display: none;
    }
    .progress-bar {
        color: #020202;
        background-image: linear-gradient(to right, #4969e6, #1ac6f2);
    }
</style>

<div class="row" >
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>工时统计</h4>
                <div id="datefilter">

                    <form id="form1" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>

                        <div class="input-group">
                            {:build_select('c-group_id', $groupdata, null, ['class'=>'form-control selectpicker', 'id'=>'c-group_id'])}
                        </div>
                        <input id="c-owner_user_id"  data-source="workteam/common/selectpage?model=admin" data-field="nickname"
                               class="form-control selectpage" name="row[owner_user_id]" type="text" value="" placeholder="选择用户">

                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control input-inline datetimerange datetimerange1" placeholder="指定日期" style="width:270px;"
                                   data-type="hours" data-url="{:url('workteam/analysis.admin/index',['ajax'=>1])}" />
                        </div>
                    </form>
                </div>
                <div id="hours-echart" style="height:400px;width:100%;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-top:20px;">
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>{:__("获取工时")}</h4>
                    <h3>
                        <span class="text-danger get-hours" >{$get_hours}</span>
                        <em  class="text-gray">(h)</em>
                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">

                    </div>
                </div>

                <div class="pull-right" style="color:#c8cfff42;">
                    <i class="fa fa-clock-o fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>{:__("安排工时")}</h4>
                    <h3>

                        <span class="text-danger plan-hours">{$plan_hours}</span>
                        <em  class="text-gray">(h)</em>

                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">

                    </div>
                </div>

                <div class="pull-right" style="color:#ffc8c842;">
                    <i class="fa fa-calendar fa-4x"></i>
                </div>


            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">

                <div class="pull-left">
                    <h4>{:__("完成任务")}</h4>
                    <h3>
                        <span class="text-success todo-task">{$todo_task}</span>
                        <em  class="text-gray"></em>


                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">

                    </div>
                </div>

                <div class="pull-right" style="color:#c8e3ff42;">
                    <i class="fa fa-refresh fa-4x"></i>
                </div>

            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">

                <div class="pull-left">
                    <h4 >{:__("安排任务")}</h4>
                    <h3>
                        <span class="text-danger plan-task">{$plan_task}</span>
                        <em  class="text-gray"></em>
                    </h3>
                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">

                    </div>
                </div>

                <div class="pull-right" style="color:#d62c1a80;">
                    <i class="fa fa-info-circle fa-4x"></i>
                </div>


            </div>
        </div>
    </div>
</div>


<script>
    var Echartdata = {:json_encode($erchart)};
</script>